<template>
  <div>软件分类管理</div>

  <!-- 查询表单的部分 -->
  <div>
    <NForm inline>
      <NFormItem>
        <NInput v-model:value="queryInfo.tname" placeholder="请输入分类名称"></NInput>
      </NFormItem>
      <NFormItem>
        <NBNttonGroup>
          <NButton type="primary" @click="requery">查询</NButton>
          <NButton type="error" @click="showAdd">添加</NButton>
        </NBNttonGroup>
      </NFormItem>
      <NFormItem>
        <NButton type="primary" @click="reset">重置</NButton>
      </NFormItem>
    </NForm>
  </div>

  <!-- 数据表格 -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>
  <div>
    <!-- {{ page }} -->
    <!-- 分页信息 -->
  </div>
  <NFlex justify="=center">
    <NPagination
      v-model:page="page.pageNumber"
      :page-size="page.pageSize"
      :item-count="page.total"
      @update-page="query"
    ></NPagination>
  </NFlex>
  <div>
    <!-- 添加的对话康 -->
    <NModal @after-leave="requery" v-model:show="available" preset="dialog" title="添加">
      <div>
        <NForm>
          <NFormItem>
            <NInput v-model:value="addInfo.tname" placeholder="请输入分类名称"></NInput>
          </NFormItem>
          <NFormItem>
            <NInput
              type="textarea"
              v-model:value="addInfo.intro"
              placeholder="请输入分类简介"
            ></NInput>
          </NFormItem>
        </NForm>
      </div>
      <template #action>
        <NButton type="primary" @click="add">添加</NButton>
        <NButton @click="resetAdd">重置</NButton>
        <NButton @click="available = false">取消</NButton>
      </template>
    </NModal>

    <!-- 修改的对话框 -->
    <NModal @after-leave="requery" v-model:show="mvisible" preset="dialog" title="修改">
      <div>
        <NForm>
          <NFormItem>
            <NInput v-model:value="modifInfo.tname" preset="dialog"></NInput>
          </NFormItem>
          <NFormItem>
            <NInput
              type="textarea"
              v-model:value="modifInfo.intro"
              placeholder="请输入分类简介"
            ></NInput>
          </NFormItem>
        </NForm>
      </div>
      <template #action>
        <NButton type="primary" @click="modify">修改</NButton>
        <NButton type="error" @click="mvisible = false">关闭</NButton>
      </template>
    </NModal>
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import {
  useMessage,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NModal,
  NDatePicker,
  NPagination,
  NFlex,
  NSpace,
  useDialog,
} from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import type { TbGamePublisher } from '@/types/crud'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import type { TbSoftwareType } from '@/types/softwareType'
const message = useMessage()
const dialog = useDialog()

// #region 数据查询
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as Array<TbSoftwareType>)
const queryInfo = ref({ tname: '' })

// #region 选择数据
const infoSelectedv = (info: TbSoftwareType) => {
  emits('info-selscted', info)
}

const loading = ref(false)
const props = defineProps(['mode'])
const emits = defineEmits(['info-selscted'])

// const selectedColumns: DataTableColumn<TbSoftwareType>[] = [] as DataTableColumn<TbSoftwareType>[]

const selectedColumns: DataTableColumn<TbSoftwareType>[] = [
  {
    title: '分类名称',
    key: 'tname',
  },
  {
    title: '	分类简介',
    key: 'intro',
  },
  {
    title: '操作',
    key: 'action',
    render: (row) => {
      return h(NButton, { type: 'info', size: 'small', onClick: () => infoSelectedv(row) }, '选择')
    },
  },
] as DataTableColumn<TbSoftwareType>[]

let columns: DataTableColumn<TbSoftwareType>[] = [
  {
    title: '分类名称',
    key: 'tname',
  },
  {
    title: '	分类简介',
    key: 'intro',
  },
  {
    title: '操作',
    key: 'action',

    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            type: 'info',
            size: 'small',
            onClick: () => {
              showModif(row)
            },
          },
          '修改',
        ),
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            onClick: () => {
              showDelete(row)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as DataTableColumn<TbSoftwareType>[]

const query = () => {
  loading.value = true
  Api.get(
    `/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVO<TbSoftwareType>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}
const requery = () => {
  page.value.pageNumber = 1
  query()
}
const reset = () => {
  queryInfo.value = { tname: '' }
  requery()
}
onMounted(() => {
  if (props.mode == 'selector') {
    columns = selectedColumns
  }
  query()
})

// #endregion
// #region 添加操作
const available = ref(false)
const addInfo = ref({} as TbSoftwareType)
const showAdd = () => {
  available.value = true
}
const resetAdd = () => {
  addInfo.value = { tname: '', intro: '' } as TbSoftwareType
}
const add = () => {
  loading.value = true
  Api.post('/crud/softwaretype', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('添加成功')
      resetAdd()
      return
    }
    message.error(data.message)
  })
}
// #endregion

// #region 修改操作
const modifInfo = ref({} as TbSoftwareType)
const mvisible = ref(false)

const showModif = (row: TbSoftwareType) => {
  modifInfo.value = Tools.concatJson(row) as TbSoftwareType
  mvisible.value = true
}
const modify = () => {
  loading.value = true
  Api.put('/crud/softwaretype', modifInfo.value, (data: BaseResult) => {
    mvisible.value = false
    if (data.success) {
      message.success('修改成功')
      return
    }
    message.error(data.message)
  })
}
// #endregion

// #region 删除
const showDelete = (row: TbSoftwareType) => {
  dialog.warning({
    title: '警告',
    content: `确定删除吗${row.tname}吗?`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      loading.value = true
      Api.delete(`/crud/softwaretype/${row.stid}`, {}, (data: BaseResult) => {
        loading.value = false
        if (data.success) {
          message.success('删除成功')
          requery()
          return
        }
        message.error(data.message)
      })
    },
  })
}
// #endregion
</script>

<style scoped></style>
